<template lang="pug">
  div.home-boc
    div.mbx
      span.ml24 班级考勤
      div(@click="$router.push('/childCare/daily/attendanceTransfer')")
        span 考勤管理
        img(src="@/assets/right.png")
    div.nr1
      form-box(
        :fields="searchField"
        :showBtns="false"
        isFilter
      )
      .content
        .itemBox(v-for="item in list" :key="item.id")
          a-image(:url="item.imgUrl" width="40px" height="40px" :preview="false" :default-image="item.gender === 0 ?'TX2':'TX1'" round)
          .right
            .detail
              .more
                .name {{item.childrenName}}
                .tag
                  el-tag(:type="item.checkStatus | checkStatusFilter('type')" size="mini") {{item.checkStatus | checkStatusFilter('label')}}
            //- .time {{item.checkTime | dateFilter('YYYY/MM/DD HH:mm')}}
            .time 2025-2-18 10:02:42
</template>
<script>
import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'
import { getClassesByArea } from '@/api/common'
import request from '@/utils/request'

const checkStatusList = [
  {
    value: '1',
    label: '已入园',
    type: 'success'
  },
  {
    value: '2',
    label: '已离园',
    type: 'primary'
  },
  {
    value: '3',
    label: '拒绝入园',
    type: 'danger'
  },
  {
    value: '4',
    label: '请假',
    type: 'warning'
  },
  {
    value: '0',
    label: '缺席',
    type: 'info'
  }
]

const url = 'web/checkrecord/check_record_by_classId'

export default {
  components: {
    AImage
  },
  filters: {
    checkStatusFilter (val, type) {
      const value = val.toString() || ''
      const status = checkStatusList.find(x => x.value === value)
      return status ? status[type] : val
    }
  },
  data () {
    return {
      list: [],
      classId: '',
      classes: []
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchField () {
      const { classId } = this
      return [
        {
          key: 'classId',
          label: '班级名称',
          type: 'select',
          initialValue: classId,
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          },
          events: {
            change: val => this.classChange(val)
          }
        }
      ]
    }
  },
  created () {
    this.getClassList()
  },
  methods: {
    // 获取列表
    getList () {
      const { classId } = this
      request({
        url,
        method: 'post',
        params: { classId }
      }).then(res => {
        this.list = (res[0] ? (res[0].childrenList || []) : [])
      })
    },
    // 获取班级列表
    getClassList () {
      const { curArea } = this
      console.log(curArea)
      getClassesByArea({ areaId: curArea.areaId, category: 1 }).then(res => {
        this.classes = res || []
        console.log(this.classes)
        this.classChange(this.classes[0] ? this.classes[0].id : '')
      })
    },
    // 选择班级
    classChange (val) {
      this.classId = val
      this.getList()
    },
    // 查看详情
    modalHandle (id) {
      this.modalObj = {
        id,
        visible: true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home-boc {
  width: 402PX;
}

.content {
  height: 456px;
  overflow: scroll;
  background: #ffffff;
}

.content::-webkit-scrollbar {
  display: none
}

.itemBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px;
  background: #F4F5FB;
  border-radius: 4px;
  margin-top: 10px;
}

.detail {
  display: flex;
  flex-direction: column;

  .more {
    display: flex;
    flex-direction: row;
    align-items: center;

    .name {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000;
    }

    .tag {
      font-size: 10px;
      font-family: PingFang SC;
      font-weight: 400;
      margin-left: 10px;
    }
  }

}

.nr1 {

  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
}

.right {
  display: flex;
  flex-direction: column;
  height: 40px;
  justify-content: space-between;
  margin-left: 12px;.time {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    color: #77778C;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>
<style>
.nr1 .el-form--inline .el-form-item {
  width: 100% !important;
  margin-bottom: 12px;
}

.nr1 .el-form-item__content {
  width: 100% !important;
}
</style>
